body {
    background-color: var(--themeColor);
}

.main {
    padding-bottom: 2rem;
    margin: 0 .3rem;

    .icons {

        > img {
            width: .48rem;
            height: .48rem;
        }

        > img:not(:last-child) {
            margin-right: .3rem;

        }

    }


    .info .photo {
        width: 1.2rem;
        height: 1.2rem;
        background: #F6F8FA;
        border-radius: 50%;
        margin-right: .28rem;

        > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    .right {
        flex: 1;

        .title {
            font-weight: 500;
            font-size: .34rem;
            color: var(--ff);
            margin-bottom: .24rem;
        }

        .level {
            padding: .06rem .12rem .08rem .12rem;
            border-radius: .2rem;
            background: #000;

            > img {
                width: .28rem;
                height: .28rem;
            }

            .level-name {
                font-weight: 400;
                font-size: .24rem;
                color: var(--ff);
                margin-left: .09rem;
            }
        }
    }

    .category-container {
        display: flex;
        flex-wrap: wrap;

    }

    .category-item {
        margin: .2rem;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }

    .category-item .tips {
        position: absolute;
        top: -.15rem;
        right: .17rem;
        width: .34rem;
        height: .34rem;
        line-height: .36rem;
        background: var(--ff);
        border-radius: 50%;
        border: 1px solid var(--bd);
        font-size: .21rem;
        color: var(--bd);
    }

    .category-item img {
        width: .54rem;
        height: .54rem;

    }

    .category-item .upper {
        font-weight: 500;
        font-size: .38rem;
        color: var(--ff);
    }

    .category-item .category-text {
        margin-top: .18rem;
        font-size: .24rem;
        color: var(--ff);
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fun-item img {
        width: .88rem;
        height: .88rem;
    }

    .card {
        background: var(--ff);
        border-radius: .20rem;


        .card-title {
            border-bottom: 1px solid var(--f1);
            padding: .24rem;

            .left {
                font-weight: 500;
                font-size: .30rem;
                color: var(--dcl);
            }

            .right, .right > i {
                font-size: .24rem;
                color: var(--c9);
                text-align: right;
            }
        }

        .card-item {
            padding: .17rem 0;
        }

    }
}